<template>
  <div>
    <MainHeader/>
    <div class="container">
  <div class="row" style="margin-top: 80px ">
    <div class="col-lg-12">
      <div class="section-top text-center">
        <h2>Shopping Cart</h2>
        <p>Convenient, Worry free, Fast and easy to save</p>
      </div>
    </div>
  </div>

      <div><h2>全部商品 {{productData.length}}</h2></div>
      <el-table
        ref="multipleTable"
        :data="productData"
        tooltip-effect="dark"
        @select-all="selectAll"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="商品名称"
          width="100">
          <template slot-scope="scope">{{ scope.row.commname}}</template>
        </el-table-column>

        <el-table-column
          label="图片"
          width="300"
          >
          <template slot-scope="scope"><img :src="scope.row.image" style="width: 200px;height: 200px"></template>
        </el-table-column>

        <el-table-column
          prop="commdesc"
          label="描述"
          width="240"

          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="thinkmoney"
          label="价格"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="common"
          label="备注"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="操作"
         > <template slot-scope="scope">
          <el-button type="text" @click="deleteFromCar(scope.row.commid)">移除购物车</el-button>
        </template>
        </el-table-column>
      </el-table>
      <div  class="footerContainer" style="background-color: lightgrey">
        <div class="col-md-4">已经选{{num}}件商品</div>
        <div class="col-md-4">总价￥{{totalPrice}}元 </div>
        <div class="calc col-md-4"><el-button type="danger" @click="handleSuccess">结算</el-button></div>
      </div>
    </div>
    <div  v-if="show" class="floatContainer" style="">
      <div class="col-md-4">已经选{{num}}件商品</div>
      <div class="col-md-4">总价￥{{totalPrice}}元 </div>
      <div class="calc col-md-4"><el-button type="danger" @click="handleSuccess">结算</el-button></div>
    </div>
    <<MainFooter/>
  </div>
</template>

<script>
import MainHeader from '../pages/Home/header'
import MainFooter from '../pages/Home/footer'
import {baseUrl} from '../utils/Address'

export default {
  name: 'car',
  components: {
    MainHeader,MainFooter
  },
  mounted () {
    window.addEventListener('scroll' , this.getScorll)
    this.getCollect()
  },
  data(){
    return{
      idList:[],
      totalPrice:0,
      num:0,
      flag:0,
      productData: [],
      multipleSelection: [],
        // name: '手机',
        // pic: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%89%8B%E6%9C%BA%E5%9B%BE%E7%89%87&hs=0&pn=1&spn=0&di=7060663421280190465&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=894074373%2C2768371935&os=1636699407%2C3584312833&simid=894074373%2C2768371935&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E6%89%8B%E6%9C%BA%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fpic159.nipic.com%2Ffile%2F20180324%2F22910120_001052313000_2.jpg%26refer%3Dhttp%3A%2F%2Fpic159.nipic.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1650542199%26t%3D3360810a6781e09d4ae4626c808c6ec0&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bgtrtv_z%26e3Bv54AzdH3Ffi5oAzdH3F8lcm98an_z%26e3Bip4s%3Fe%3Dd%26_1wa_z%26e3B8ln889999mb988bb0&gsm=2&islist=&querylist=&dyTabStr=MCwzLDYsMSw0LDUsMiw4LDcsOQ%3D%3D',
        // desc: '哈哈哈哈哈哈哈哈啊哈',
        // count: 1,
        // price: 2999
      scrollTop:'',
      show:true,

    }
  },
  methods: {
    async getCollect () {
      this.productData=[]
      let data = await this.axios.get(`${baseUrl}//user/collect/queryall`)
      let result = data.data.data
      console.log(result)
      result.forEach(item => {
        this.idList.push(item.commid)
      })
      this.idList.forEach(item => {
        this.axios.get(`${baseUrl}/product-detail/${item}`).then(
          res => {
            if (res.data.data !== null) {
              console.log(this.productData)
              this.productData.push(res.data.data)
            }
          }
        )
      })
      console.log(this.productData)
    },
    getScorll (event) {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (parseInt(this.scrollTop) >= 900) {
        this.show = false
      } else {
        this.show = true
      }
    },
    deleteFromCar (id) {
      this.axios.get(`${baseUrl}/collect/delete/${id}`).then(
        res => {
          console.log(res)
          if(res.data.status===200){
            this.$message.success('success')
            this.getCollect();
          }
         else {
           this.$message.error('failed')
          }
        }
      )
    },
    selectAll(){
      this.checked=true
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
          console.log(111)
        });
      } else {
        this.$refs.multipleTable.clearSelection();
        console.log(222)
      }
    },
    handleSelectionChange (val) {
      if (val.length === this.productData.length) {
        this.num=val.length
        val.forEach(item => {
          this.totalPrice = this.totalPrice + parseInt(item.thinkmoney)
        })
      } else if (val.length === 0) {
        this.totalPrice = 0
        this.flag=0
        this.num=0
      } else {
        this.totalPrice = parseInt(val[this.flag++].thinkmoney) + this.totalPrice
        console.log(this.totalPrice)
        this.multipleSelection = val;
        this.num++
      }
    },
    handleSuccess(){
      this.$message.success('嘿嘿')
    }
  }
}
</script>

<style scoped>
.floatContainer{
  border-radius: 2px;
  width: 100%;
  height: 80px;
  position: fixed;
  bottom: 0;
  z-index: 10;
  display: flex;
  background-color: lightgray;
}
.floatContainer>div{
  line-height: 80px;
  font-size: 20px;
}
.footerContainer{
  border-radius: 2px;
  border:0.5px solid lightgray;
  padding-left: 3px;
  height: 80px;
  display: flex;
  margin:40px 0;
}
.footerContainer>div{
  line-height: 80px;
  font-size: 20px;
}

.deleteAll,.emptyAll{
  font-size: 13px!important;
  color: red;
}

.calc{
  flex-grow: 2;
  text-align: center;
  border-radius: 2px;
}
</style>
